<template>
	<!-- 客服 -->
	<movable-area class="movable-area">
		<movable-view class="movable-view" :x="moveData.x" :y="moveData.y" direction="all">
			<image
				@click="contactModel.show = true"
				class="contactImg"
				src="http://112.124.50.179:8888/imgs/service/service_move.png"
			></image>
		</movable-view>
	</movable-area>

	<!-- 展示二维码弹框 -->
	<qrcodePopup
		v-model:show="contactModel.show"
		:qrcodeUrl="qrcodeUrl"
	></qrcodePopup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import qrcodePopup from './qrCodePopup.vue';
import store from '@/store/index.js';

const props = defineProps({
	qrcodeUrl: {
		type: String,
		required: true
	}
});

const tabbarHeight = getApp().globalData.tabbarHeight;
const bottom = getApp().globalData.bottom;
// #ifdef H5
const moveData = reactive({
	x: document.body.clientWidth - uni.upx2px(120 + 32),
	y: document.body.clientHeight - tabbarHeight - uni.upx2px(140 + 144)
});
// #endif
// #ifdef MP-WEIXIN || APP
const moveData = reactive({
	x: uni.getSystemInfoSync().screenWidth - uni.upx2px(120 + 32),
	y: uni.getSystemInfoSync().screenHeight - tabbarHeight - uni.upx2px(140 + 144)
});
// #endif

// 客服弹框
const contactModel = reactive({
	show: false
});
</script>

<style lang="scss">
.movable-area {
	height: 100vh;
	width: 750rpx;
	top: 0;
	position: fixed;
	pointer-events: none; //此处要加，鼠标事件可以渗透
	z-index: 9999;

	.movable-view {
		pointer-events: auto; //恢复鼠标事件
	}
}

.contactImg {
	width: 120rpx;
	height: 140rpx;
}
</style>
